<!-- eslint-disable no-use-before-define -->
<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2023-12-04 15:57:32
 * @LastEditTime: 2024-11-13 17:24:58
 * @LastEditors:  Please set LastEditors
-->
<!-- eslint-disable @typescript-eslint/no-empty-function -->
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import {
  onLoad,
  onShow,
  onReady,
  onReachBottom,
  onPageScroll
} from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, userApi, moneyApi } from '@/api';
import { getImgFullPath, dateFormat } from '@/utils/index'
import { useConfigStore, useUserStore } from '@/store'
import { route } from '@/utils/common'
import c_topUp from './c_topUp'
import c_user_add from './c_user_add'

const userStore = useUserStore()
const configStore = useConfigStore()

const topupRef = ref()
const userAddRef = ref()
const dataList = reactive({
  companyId: '',
  pageIndex: 1,
  pageSize: 18,
  list: []
})
const status = ref('loadmore')
async function getDataList() {
  if (status.value === 'nomore') return
  status.value = 'loading'
  const { data } = await baseApi.companyUserList({
    pageIndex: dataList.pageIndex,
    pageSize: dataList.pageSize,
    companyId: dataList.companyId,
    detail: true,
    otherColumns: 'shopCountWallet'
  })
  const { records, current, pages } = data
  dataList.list.push(...records)
  if (current < pages) {
    dataList.pageIndex += 1
  } else {
    status.value = 'nomore'
  }
}
function refresh() {
  status.value = 'loading'
  dataList.pageIndex = 1,
    dataList.list = []
  getDataList()
}
function openUserAdd(params) {
  userAddRef.value.open()
}
async function handleUserAdd(e) {
  const { phone } = e
  uni.showLoading({
    title: '添加中...'
  })
  const { code } = await baseApi.companyUserAdd({
    companyId: dataList.companyId,
    userPhone: phone
  }).finally(() => {
    uni.hideLoading()
  })
  if (code === 200) {
    uni.showToast({
      title: '添加成功',
    })
    refresh()
  }
}

function openTopup(params: { companyId: any; userId: any; }) {
  topupRef.value.open()
  topupRef.value.getWalletInfo(params.companyId, params.userId)
}
async function handleTopup(e) {
  const { count, walletId, toUserId } = e
  uni.showLoading({
    title: '充值中...'
  })
  const { code } = await moneyApi.shopCountTransfer({
    walletId: walletId,
    toUserId: toUserId,
    money: count
  }).finally(() => {
    uni.hideLoading()
  })
  if (code === 200) {
    uni.showToast({
      title: '充值成功',
    })
    refresh()
  }
}
const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
onLoad((option) => {
  if (option?.id) {
    dataList.companyId = option.id
  }
  getDataList()
})
onReachBottom(() => {
  getDataList()
})
</script>
<template>
  <view class="container">
    <hy-nav-bar title="事业部用户" v-if="!configStore.isWeChatBrowser"></hy-nav-bar>
    <view class="add" @click="openUserAdd">添加员工+</view>
    <view class="list">
      <view class="item" v-for="item in dataList.list" :key="item.id">
        <view class="data">
          <view class="top">
            <u-avatar :src="getImgFullPath(item.user.avatar)"></u-avatar>
            <view class="info">
              <view class="tit">{{ item.user.nickname }}</view>
              <view class="phone">{{ item.user.phone }}</view>
            </view>
          </view>
          <view class="role" v-if="item.roleName">
            <text class="tag" v-for="(role, index) in item.roleName.split(',')" :key="index"> {{ role }}</text>
          </view>
          <view class="topup">
            <view class="money">额度：{{ item?.shopCountWallet?.money || 0 }}</view>
            <u-button type="primary" shape="circle" size="mini" ripple :custom-style="{
              width: '120rpx',
              height: '40rpx',
              background: '#FF6C18',
              margin: 0
            }" @click="openTopup(item)">充值</u-button>
          </view>
          <view class="bot">
            <view></view>
            <view>{{
              dateFormat(new Date(item.createTime * 1000), 'yyyy-MM-dd hh:mm')
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <c_topUp ref="topupRef" @onConfirm="handleTopup"></c_topUp>
    <c_user_add ref="userAddRef" @onConfirm="handleUserAdd"></c_user_add>
    <u-loadmore :status="status" />
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 0 30rpx 30rpx 30rpx;

  .add {
    text-align: right;
    margin: 20rpx 0 20rpx 0;
    color: #2979ff;
  }
}

.list {
  margin-top: 30rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;
    background: #fff;
    padding: 20rpx;

    .data {
      flex: 1;
      margin-right: 20rpx;

      .top {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 30rpx;
        margin-bottom: 16rpx;

        .info {
          margin-left: 20rpx;

          .phone {
            color: #999;
            font-size: 26rpx;
            margin-top: 10rpx;
          }
        }

        .money {
          color: red;
        }

      }

      .role {
        max-width: 400rpx;
        overflow-x: scroll;
        margin: 4rpx;

        .tag {
          display: inline-block;
          border: 2rpx solid #ccc;
          color: #ccc;
          border-radius: 6rpx;
          margin-right: 10rpx;
          padding: 4rpx 10rpx;
          font-size: 24rpx;
        }
      }

      .topup {
        color: #000;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;

        .money {
          margin-bottom: 10rpx;
        }
      }

      .bot {
        color: #999;
        font-size: 26rpx;
        display: flex;
        justify-content: space-between;
        text-align: right;
        margin-top: 20rpx;
      }
    }
  }
}
</style>
